<template>
    <div class="houseCont">
         <!-- 搜索区域 -->
        <div class="searHouse">          
            <div class="loactionCity" v-if="show">
                <p class="location"><span @click="locationCity">{{city}}</span><van-icon name="arrow-down"></van-icon></p>
                <p class="search"><input v-model="values" @input="inp(values)" type="text" placeholder="请在这里搜索区域/商圈"><van-icon name="search" @click="searchs(values)"></van-icon></p>
                <a href="/#/map" class="mapHouse">地图找房</a>
            </div>
            <div class="loactionCity" v-else>
                <p class="location"><span @click="locationCity">{{city}}</span><van-icon name="arrow-down"></van-icon></p>
                <div class="searchs">
                    <input v-model="value" type="text" placeholder="请在这里搜索区域/商圈">
                    <p class="searcher" @click="search(value)"><van-icon name="search" ></van-icon></p>
                </div>
            </div>
        </div>
        <!-- 类型区域 -->
        <div class="houseSelect" v-if="showF">
            <van-grid :border="false" :column-num="3" >
                <van-grid-item v-for="(v,i) in selectType.type" :key="i" :to="v.path">
                    <van-image
                        width="36"
                        height="38"
                        :src="v.srcUrl"
                    />
                    <span class="select_tit">{{v.title}}</span>
                </van-grid-item>
            </van-grid>
        </div>
        <!-- 筛选区域 -->
        <div class="screen">
            <div class="screen_tab">
                <router-link v-for="(k,z) in selectType.screens" :key="z" :to="k.path" @click="routSelect">
                    {{k.title}}
                    <van-icon name="arrow-down"></van-icon>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import findShop from '../../images/findFloor.jpg'
import findFloor from '../../images/findShop.jpg'
import findRoom from '../../images/findRoom.jpg'
import { defineComponent ,getCurrentInstance,onMounted,reactive,ref} from 'vue'
import {useRouter} from 'vue-router'
import {getHouseDatum} from '../../api/getDatum'
import ajax from '../../utils/axios'
import {bus} from '../../utils/Bus'
export default defineComponent({
    // 接收上级传过来的数据
    props:['tit'],
  setup(props,context) {
        // 引入路由
        const router = useRouter();
        // 初始化地区
        let city = reactive(localStorage.getItem('locaCity')); 
        // 搜索参数
        let value = ref('');
        let values = ref('');
        // 用于判断组件
        let show = ref(false);
        // 房源数据
        const houseLis = reactive({
            houseDatum:[],
            lisDatum:[]
        })
        const add = () => {
            ajax.get('house/all').then(res => {
                console.log(res);
                houseLis.houseDatum = res.data.list;
                houseLis.lisDatum = res.data.list;
            })
        }

        add()
        // 判断 
        let showF = ref(null);

        // 选择查找项数据
        const selectType = reactive({
            type:[
                {
                    'title':'商铺',
                    'srcUrl':findShop,
                    'path':'/shop'
                },
                {
                    'title':'写字楼',
                    'srcUrl':findFloor,
                    'path':'/building'
                },
                {
                    'title':'小区',
                    'srcUrl':findRoom,
                    'path':'/plot'
                }
            ],
            screens:[
                {
                    'title':'区域',
                    'path':'/area'
                },
                {
                    'title':'价格',
                    'path':'/price'
                },
                {
                    'title':'户型',
                    'path':'/roomType'
                },
                {
                    'title':'筛选',
                    'path':'/orientation'
                }
            ]
        })
        // 跳转城市页面
        const locationCity = () => {
            router.push('/city')
        }

        // 输入内容
        const inp = (val) => {
            if(val === ''){
                console.log(1);
                bus.emit('inp',houseLis.lisDatum);
                houseLis.houseDatum = houseLis.lisDatum;

            }
        }

        // 搜索房源
        const search = (value) => {
            console.log(1,'1');
            console.log(add,'add');
            console.log(value,'123');
            
        }

        const searchs = (values) => {
            houseLis.houseDatum = houseLis.houseDatum.filter(item => {
                return item.house_title.indexOf(values) !== -1;
            })
            bus.emit('searchs',houseLis.houseDatum)
            // console.log(houseLis.houseDatum);
        }

        

        if(props.tit === '新房'){
            show.value = true;
            showF.value = true;
        }else if(props.tit === '二手房'){
            showF.value = true;
        }else if (props.tit === '出租房'){
            showF.value = true;
        }
        else{
            show.value = true;
            showF.value = false;
        }


        
        // 点击路由时
        const routSelect = () => {
            if(props.tit === '新房'){
                localStorage.setItem('House','新房')
            }else if(props.tit === '二手房'){
                localStorage.setItem('House','二手房')
            }else if( props.tit === '出租房'){
                localStorage.setItem('House','出租房')
            }
        }


      return {    
        show,
        value,
        city,
        search,
        searchs,
        selectType,
        houseLis,
        locationCity,
        routSelect,
        showF,  
        inp       
      }
  },
})
</script>

<style lang='less' scoped>
.houseCont{
    width: 100%;
    height: 100%;
    .loactionCity{
        width: 100%;
        height: 60px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        .location{
            font-size: 14px;
            display: flex;
            span{
                margin-right: 5px;
                width: 28px;
            }
            i{
                margin-right: 20px;
                color: #999999;
            }
        }
        .search{
            flex: 1;
            border: 1px solid #cbcccc;
            margin-right: 20px;
            height: 30px;
            background: #f4f4f4;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 5px 0 15px;
            
            input{
                border: none;
                outline: none;
                font-size: 13px;
                background: none;
            }
        }
        .searchs{
            flex: 1;
            border: 1px solid #cbcccc;
            margin-right: 80px;
            height: 30px;
            background: #f4f4f4;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 5px 0 15px;           
            input{
                border: none;
                outline: none;
                font-size: 13px;
                background: none;
            }
            .searcher{
                height: 100%;
                width: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 5px;
            }
        }
        .mapHouse{
            color: #333333;
            font-size: 15px;
        }
    }
    .houseSelect{
        width: 100%;
        height: 100px;
        margin-top: -8px;
        .van-grid{
            width: 100%;
            height: 100%;
            span{
                margin-top: 12px;
            }
        }
    }
    .screen{
        width: 100%;
        height: 46px;
        border-top: 1px solid #9b9b9b;
        border-bottom: 1px solid #9b9b9b;
        .screen_tab{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            a{
                margin-right: 5px;
                color: #333333;
                font-size: 14px;
                i{
                    color: #333333;
                }
            }
            a.router-link-active{
            color: #f19e38;
            }
        }
    }
}
</style>
